<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>河域分割系统 - 首页</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
    <style>
        .hero-section {
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('{{ url_for("static", filename="img/river_hero.jpg") }}');
            background-size: cover;
            background-position: center;
            color: white;
            padding: 100px 0;
            text-align: center;
        }
        
        .feature-box {
            padding: 20px;
            border-radius: 5px;
            margin-bottom: 30px;
            text-align: center;
            height: 100%;
            transition: transform 0.3s;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .feature-box:hover {
            transform: translateY(-10px);
        }
        
        .model-comparison {
            background-color: #f8f9fa;
            padding: 50px 0;
        }
        
        .model-card {
            border: 1px solid #ddd;
            padding: 20px;
            border-radius: 5px;
            margin-bottom: 20px;
            height: 100%;
        }
        
        .model-card h4 {
            color: #0d6efd;
        }
        
        .cta-section {
            background-color: #0d6efd;
            color: white;
            padding: 50px 0;
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="{{ url_for('index') }}">河域分割系统</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="{{ url_for('index') }}">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#features">特点</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#models">模型</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('auth.login') }}">登录</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('auth.register') }}">注册</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 头部区域 -->
    <section class="hero-section">
        <div class="container">
            <h1 class="display-4">河域分割系统</h1>
            <p class="lead mb-4">基于深度学习的河域分割与分析平台，支持多模型对比分析</p>
            <div>
                <a href="{{ url_for('auth.login') }}" class="btn btn-primary btn-lg me-2">登录</a>
                <a href="{{ url_for('auth.register') }}" class="btn btn-outline-light btn-lg">注册</a>
            </div>
        </div>
    </section>

    <!-- 特点介绍 -->
    <section id="features" class="py-5">
        <div class="container">
            <h2 class="text-center mb-5">系统特点</h2>
            <div class="row">
                <div class="col-md-4">
                    <div class="feature-box bg-light">
                        <div class="feature-icon mb-3">
                            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="#0d6efd" class="bi bi-water" viewBox="0 0 16 16">
                                <path d="M.036 3.314a.5.5 0 0 1 .65-.278l1.757.703a1.5 1.5 0 0 0 1.114 0l1.014-.406a2.5 2.5 0 0 1 1.857 0l1.015.406a1.5 1.5 0 0 0 1.114 0l1.014-.406a2.5 2.5 0 0 1 1.857 0l1.015.406a1.5 1.5 0 0 0 1.114 0l1.757-.703a.5.5 0 1 1 .372.928l-1.758.703a2.5 2.5 0 0 1-1.857 0l-1.014-.406a1.5 1.5 0 0 0-1.114 0l-1.015.406a2.5 2.5 0 0 1-1.857 0l-1.014-.406a1.5 1.5 0 0 0-1.114 0l-1.015.406a2.5 2.5 0 0 1-1.857 0L.314 3.964a.5.5 0 0 1-.278-.65zm0 3a.5.5 0 0 1 .65-.278l1.757.703a1.5 1.5 0 0 0 1.114 0l1.014-.406a2.5 2.5 0 0 1 1.857 0l1.015.406a1.5 1.5 0 0 0 1.114 0l1.014-.406a2.5 2.5 0 0 1 1.857 0l1.015.406a1.5 1.5 0 0 0 1.114 0l1.757-.703a.5.5 0 1 1 .372.928l-1.758.703a2.5 2.5 0 0 1-1.857 0l-1.014-.406a1.5 1.5 0 0 0-1.114 0l-1.015.406a2.5 2.5 0 0 1-1.857 0l-1.014-.406a1.5 1.5 0 0 0-1.114 0l-1.015.406a2.5 2.5 0 0 1-1.857 0L.314 6.964a.5.5 0 0 1-.278-.65zm0 3a.5.5 0 0 1 .65-.278l1.757.703a1.5 1.5 0 0 0 1.114 0l1.014-.406a2.5 2.5 0 0 1 1.857 0l1.015.406a1.5 1.5 0 0 0 1.114 0l1.014-.406a2.5 2.5 0 0 1 1.857 0l1.015.406a1.5 1.5 0 0 0 1.114 0l1.757-.703a.5.5 0 1 1 .372.928l-1.758.703a2.5 2.5 0 0 1-1.857 0l-1.014-.406a1.5 1.5 0 0 0-1.114 0l-1.015.406a2.5 2.5 0 0 1-1.857 0l-1.014-.406a1.5 1.5 0 0 0-1.114 0l-1.015.406a2.5 2.5 0 0 1-1.857 0l-1.757-.703a.5.5 0 0 1-.278-.65z"/>
                            </svg>
                        </div>
                        <h4>多模型支持</h4>
                        <p>集成U-Net、U²-Net和MNDWI三种水域分割方法，便于对比分析</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="feature-box bg-light">
                        <div class="feature-icon mb-3">
                            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="#0d6efd" class="bi bi-images" viewBox="0 0 16 16">
                                <path d="M4.502 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>
                                <path d="M14.002 13a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2V5A2 2 0 0 1 2 3a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v8a2 2 0 0 1-1.998 2zM14 2H4a1 1 0 0 0-1 1h9.002a2 2 0 0 1 2 2v7A1 1 0 0 0 15 11V3a1 1 0 0 0-1-1zM2.002 4a1 1 0 0 0-1 1v8l2.646-2.354a.5.5 0 0 1 .63-.062l2.66 1.773 3.71-3.71a.5.5 0 0 1 .577-.094l1.777 1.947V5a1 1 0 0 0-1-1h-10z"/>
                            </svg>
                        </div>
                        <h4>数据处理</h4>
                        <p>支持高分辨率卫星影像和SHP文件处理，自动预处理和格式转换</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="feature-box bg-light">
                        <div class="feature-icon mb-3">
                            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="#0d6efd" class="bi bi-graph-up" viewBox="0 0 16 16">
                                <path fill-rule="evenodd" d="M0 0h1v15h15v1H0V0Zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07Z"/>
                            </svg>
                        </div>
                        <h4>结果可视化</h4>
                        <p>生成专题地图、时间序列分析图表，提供面积计算和导出功能</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 模型对比 -->
    <section id="models" class="model-comparison">
        <div class="container">
            <h2 class="text-center mb-5">模型对比</h2>
            <div class="row">
                <div class="col-md-4">
                    <div class="model-card">
                        <h4>U-Net</h4>
                        <p><strong>类型：</strong> 深度学习分割网络</p>
                        <p><strong>特点：</strong> 经典分割模型，结构简洁，资源占用较少</p>
                        <p><strong>适用场景：</strong> 一般水域分割任务，计算资源有限情况</p>
                        <p><strong>优势：</strong> 训练速度快，模型较小，部署简单</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="model-card">
                        <h4>U²-Net</h4>
                        <p><strong>类型：</strong> 深度学习分割网络</p>
                        <p><strong>特点：</strong> 改进的U-Net结构，嵌套U结构设计</p>
                        <p><strong>适用场景：</strong> 复杂水系边界，需要高精度分割</p>
                        <p><strong>优势：</strong> 精度更高，捕获细节能力强，边界更准确</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="model-card">
                        <h4>MNDWI</h4>
                        <p><strong>类型：</strong> 传统水体指数方法</p>
                        <p><strong>特点：</strong> 基于绿波段和SWIR波段计算水体指数</p>
                        <p><strong>适用场景：</strong> 多光谱影像，浅水区域提取</p>
                        <p><strong>优势：</strong> 计算简单快速，无需训练，物理意义明确</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 呼吁行动 -->
    <section class="cta-section">
        <div class="container">
            <h2 class="mb-4">开始使用河域分割系统</h2>
            <p class="lead mb-4">上传您的数据，获取精确的河域分割结果和专业分析</p>
            <a href="{{ url_for('auth.register') }}" class="btn btn-light btn-lg">立即注册</a>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-4">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h5>河域分割系统</h5>
                    <p>基于深度学习的河域分割与分析平台</p>
                </div>
                <div class="col-md-3">
                    <h5>链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="{{ url_for('index') }}" class="text-white">首页</a></li>
                        <li><a href="#features" class="text-white">特点</a></li>
                        <li><a href="#models" class="text-white">模型</a></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <h5>账户</h5>
                    <ul class="list-unstyled">
                        <li><a href="{{ url_for('auth.login') }}" class="text-white">登录</a></li>
                        <li><a href="{{ url_for('auth.register') }}" class="text-white">注册</a></li>
                    </ul>
                </div>
            </div>
            <hr>
            <div class="text-center">
                <p>&copy; 2023 河域分割系统. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html> 